.button {
  display: block;
  position:relative;
  width: 150px;
  height: 30px;
  top: 14px;
  left: 75px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  border-radius: 5px;
 /* box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.9) inset;*/
 border:solid 1px #d2d6de;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  position: absolute;
  display: block;
}
.button span:first-of-type {
  z-index: 100;
  top: 0px;
  right: 0px;
  width: 80px;
  height: 28px;
  background: -webkit-linear-gradient(top, #367fa9 0%, #367fa9 100%);
  background: linear-gradient(to bottom, #367fa9 0%, #367fa9 100%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.2) inset, 0 -0px 0px rgba(0, 0, 0, 0.2) inset, 0 -0px 0px rgba(0, 0, 0, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.2), -0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0 0px rgba(0, 0, 0, 0.2) inset;
  border-radius: 5px;
  -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
          transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
}
.button span:nth-last-of-type(-n+2) {
  z-index: 10;
  top: 0px;
  width: 80px;
  height: 28px;
  -webkit-transition: opacity 800ms ease 100ms;
          transition: opacity 800ms ease 100ms;
}
.button span:nth-last-of-type(-n+2):after {
  position: absolute;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 80;
  font-size: 24px;
  color: white;
  text-shadow: 0 0px 0px rgba(0, 0, 0, 0.2), 0 0 0px #ffffff;
}
.button span:nth-of-type(2) {
  left: 0px;
  background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.2) inset;
}
.button span:nth-of-type(2):after {
  content: "OFF";
  left: 18px;
  color:#367fa9;
}
.button span:last-of-type {
  right: 0px;
  background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5) inset, 0 -0px 0px rgba(0, 0, 0, 0.5) inset;
  opacity: 0.2;
}
.button span:last-of-type:after {
  content: "ON";
  right: 22px;
  color:#367fa9;
}
.button input[type="checkbox"] {
  
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  right: 68px;
  box-shadow: 0 0px 0px rgba(255, 255, 255, 0.1) inset, 0 0px 0px rgba(255, 255, 255, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px rgba(0, 0, 0, 0.4), 0px 0 0px rgba(209, 245, 224, 0.5) inset;
}
.button input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  opacity: 0.2;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  opacity: 1;
}
